<!--<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24"> 
		<nav>
			<ul>
				<li :class="jokes" @click="changeNav('jokes')">财经新闻</li>
				<li :class="localNews" @click="changeNav('localNews')">本地新闻</li>
			</ul>
		</nav> 
      </el-col>
    </el-row> 
    <el-divider />
	<el-row v-if="isLoading" justify="center">
      <el-col :span="24">
        <el-loading text="加载中..." fullscreen>加载中</el-loading>
      </el-col>
    </el-row>
    <el-row :gutter="20" id="NewsMenu" v-if="activeNav === 'localNews'"> 
		<el-col :sm="24" :lg="24">
			<el-card class="update-log">
			<NewsList :data="newsList"></NewsList>
			</el-card>
		</el-col> 
    </el-row>  
    <el-row :gutter="20"  id="JokesMenu" v-if="activeNav === 'jokes'"> 
		<el-col :sm="24" :lg="24">
			<el-card class="update-log">
			<JokesList :data="jokesList"></JokesList>
			</el-card>
		</el-col> 
    </el-row>
  </div>
</template>
 -->
<script>
/** 
	import NewsList from '../views/supercells/news/NewsList'
	import JokesList from '../views/supercells/news/JokesList'

	export default{
		data(){
			return {
				newsList:[],
				jokesList:[],
				isLoading: true // 添加加载状态变量
				, activeNav: 'jokes' // 添加当前选择的导航标签变量
			}
		},
		created() {  
			this.isLoading = true; // 开始加载数据
			this.$axios.get('/juheNews/fapigx/areanews/query',{
				params:{
					areaname:'江苏',
					word:'南京',
					key:'1309e9f2ad06fbb22e031ebde8337cdf'
				}
			}).then(response=> { 
					this.isLoading = false; // 加载出错
					this.newsList = response.data.result.list;
				})
				.catch(error=> {
				alert(error);
					this.isLoading = false; // 加载出错
					console.log(error);
				});
			//加载joke
			this.$axios.get('/juheNews/fapigx/caijing/query',{
				params:{ 
					num:20,
					key:'9ad9b92b97df3daccc64638f977c496b'
				}
			}).then(response=> {  
					this.isLoading = false; // 加载出错
					this.jokesList = response.data.result.newslist;
				})
				.catch(error=> { 
				alert(error);
					this.isLoading = false; // 加载出错
					console.log(error);
				});	
		},
		methods:{
			changeNav(param){
				this.activeNav = param;
			}
		},
		components:{
			NewsList,
			JokesList
		}
  }
 */
</script>
 
<style>
	/******************** css reset ********************/
	html,body,div,header,nav,h1,h2,h3,h4,h5,h6,ul,li{
		margin: 0;
		padding: 0;
		font-family: "微软雅黑";
	}
	ul{
		list-style: none;
	}
	a{
		text-decoration: none;
	}
	
	header{
		width: 100%;
		height: 48px;
		background-color: #E03D3E;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 20px;
		color: #fff;
		/*设置字间距*/
		letter-spacing: 4px;
	}
	nav{
		width: 100%;
		height: 56px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	nav ul{
		width: 160px;
		height: 26px;
		
		display: flex;
		justify-content: space-between;
	}
	nav ul li{
		width: 70px;
		height: 26px;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.navinit{
		color: #E03D3E;
		border-bottom: solid 2px #E03D3E;
	}
</style>

 
